<template>
  <div class="account-box">
    <mt-field label="用户名" placeholder="请输入用户名" v-model="info.username"></mt-field>
    <mt-field label="昵称" placeholder="是时候体验真正的个性了" v-model="info.nickName"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="info.password"></mt-field>
    <mt-field label="确认密码" placeholder="请再次输入密码" type="password" v-model="info.rePassword"></mt-field>
    <mt-tabbar v-model="selected">
      <mt-tab-item>
        <router-link :to="{path: '/login'}">登录</router-link>
      </mt-tab-item>
      <mt-tab-item>
        <router-link :to="{path: '/forgetpwd'}">忘记密码</router-link>
      </mt-tab-item>
    </mt-tabbar>

    <mt-button class="account-login-btn" type="primary" size="small" @click="registerFun">注册</mt-button>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
  data () {
    return {
      info: {
        username: '',
        nickName: '',
        password: '',
        rePassword: '',
        loginSta: false
      },
      selected: 'tab1'
    }
  },
  methods: {
    registerFun () {
      var usLen = this.info.username.length;
      var nnLen = this.info.nickName.length;
      var pwd = this.info.password;
      var rePwd = this.info.rePassword;
      if(usLen < 4) {
        Toast('用户名不能小于4个字符');
        return;
      }
      if(nnLen < 2) {
        Toast('昵称不能小于2个字符');
        return;
      }
      if(pwd < 6) {
        Toast('密码不能小于6位');
        return;
      }
      if(pwd != rePwd) {
        Toast('两次密码输入有误');
        return;
      }
      this.setItemStorange("userInfo", JSON.stringify(this.info));
      Toast('注册成功');
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less">
  .account-box {
    padding: 70px 20px;
    .mint-cell {
      min-height: 40px;
    }
    .mint-cell-wrapper {
      background-position: bottom left;
      padding: 0;
    }
    .mint-cell-text {
      font-size: 12px;
      padding-left: 15px;
    }
    .mint-field-core {
      font-size: 12px;
    }
    .account-login-btn {
      margin-top: 25px;
      width: 100%;
    }
    .mint-tab-item-label {
      padding: 10px 0;
    }
  }
</style>